<template> 
    <van-row>
      <van-col span="6">        
        <van-sticky :offset-top="46">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item v-for="(item, i) in categoryList" :key="i" :title="item.name"
              @click="onClickLeftMenus(item.id)" />
          </van-sidebar>
        </van-sticky>      
      </van-col>
      <van-col span="18">
        <!-- 下拉刷新组件 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <!-- 列表组件 -->
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
            :immediate-check="false"
            :offset="0">
            <!-- 商品卡片列表 -->
            <van-card v-for="(item,i) in productList" :key="i" :num="item.sold_count" :price="item.price"
              :desc="item.spec" :title="item.title" :thumb=" APIDomainName + item.pic"
              @click="onDetail(item.id)" />
          </van-list>
        </van-pull-refresh>
      </van-col>
    </van-row>
 
</template>
 
<script>
  //1.导入封装后的接口  
  import {    getProductListAPI  } from "@/api/product.js";
  import {    getCategoryAPI  } from "@/api/category.js";
  export default {
    data() {
      return {
        productList: [],
        categoryList: [], //类别菜单名称列表，注意其数据结构
        category_id: null,
        activeKey: 0,

        //分页
        pageIndex: 0, //页码  
        pageSize: 10, //页大小       
        pageTotal: 0, //总页数

        //上拉加载状态控制变量
        // List有以下三种状态，理解这些状态有助于你正确地使用List组件：       
        // 非加载中，loading为false，此时会根据列表滚动位置判断是否触发onload事件（列表内容不足一屏幕时，会直接触发）。        
        // 加载中，loading为true，表示正在发送异步请求，此时不会触发onload事件。        
        // 加载完成，finished为true，此时不会触发onload事件 在每次请求完毕后，需要手动将loading设置为false，表示加载结束。
        loading: false,
        finished: false,
       
         //下拉刷新状态控制变量
         refreshing: false,
      }
    },

    //生命周期钩子函数,当实例创建好了后被调用,
    created() {
      // 获取左侧导航的分类内容
      getCategoryAPI().then(result => {
        this.categoryList = result.data;
        this.category_id = this.categoryList[0].id;      
        this.onRefresh();
      }).catch(error => {
        console.error('获取分类数据失败:', error);
      });
    },
   
    methods: {
      //点击左侧分类
      onClickLeftMenus(category_id) {
        this.category_id = category_id;
        this.productList = []; //清空
        this.onRefresh();
      },
     
      // 上拉加载每次1页
      onLoad() {        
        // 异步更新数据
        this.pageIndex +=1; //页码递增
        let category_id = this.category_id; //商品分类id
        let pageIndex = this.pageIndex;
        let pageSize = this.pageSize; //页大小       
        getProductListAPI({
          category_id,
          pageIndex,
          pageSize
        }).then((result) => {
          console.log(result); //调式输出，看数据结构
          this.pageTotal = result.pageTotal; //总页数
         
          //如果是正在下拉刷新中
          if (this.refreshing) {
            this.productList = []; //清空
            this.refreshing = false;
          }
         
          if (result.data.length > 0) {
            this.productList = this.productList.concat(result.data); //数据拼接
          }

          // 设置本次上拉加载状态结束
          this.loading = false;

          // 判断是否数据全部加载完成
          if (this.pageIndex > this.pageTotal) {
            this.finished = true;
          }
        }).catch(error => {
          console.error('获取商品列表数据失败:', error);
          this.loading = false;
        });
      },

      // 下拉刷新
      onRefresh() {        
        this.pageIndex = 0; //重置页码        
        this.finished = false; //重置上拉加载未完成
       
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },     
     
      //点击右侧商品导航到商品详情
      onDetail(id) {
        console.log('点击商品的 id:', id);
        this.$router.push({
          name: 'productDetail',
          query: { // 使用 query 参数传递商品 ID，也可以使用 params，根据你的路由配置来选择
            id
          },
        });
      }
    }
  }
</script>
 
<style lang="less" scoped="scoped">
  .van-sidebar {
    width: 120px;

    .van-sidebar-item {
      padding: 10px;
    }
  }

  .van-card {
    font-size: 14px;

    .van-card__content {
      justify-content: center;

      .van-card__price {
        color: red;
        font-weight: bold;
        text-align: right;
      }
    }
  }
</style>